<script>
import Layout from "@/components/Layout";
import SiteAsude from "@/views/SiteAsude";
export default {
  components: {
    Layout,
    SiteAsude,
  },
  computed: {
    pathName() {
      return this.$route.name;
    },
  },
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    async handlerLogout() {
      this.isLoading = true;
      await this.$store.dispatch("loginUser/loginOut");
      this.$showMessage({
        content: "退出成功",
        type: "success",
      });
      this.isLoading = false;
      this.$router.push({ name: "Login" });
    },
  },
};
</script>

<template>
  <Layout>
    <!-- 左边栏目 -->
    <template #left>
      <div class="left-asude">
        <SiteAsude
          v-if="!['Loading', 'Login'].includes(pathName)"
          @logout="handlerLogout"
        />
      </div>
    </template>
    <!-- 中间主要内容 -->
    <template>
      <div class="main-content" v-loading="isLoading">
        <router-view />
      </div>
    </template>
    <!-- 右边栏目 -->
    <template #right> </template>
  </Layout>
</template>

<style scoped lang="less">
.left-asude {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.main-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
